<template>
  <!-- <div class="v">
      <video-player ref="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions"
      @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" />
  </div> -->
  <div>
      <el-page-header content="测试视频" @back="goBack">
        </el-page-header>
        <el-row>
            <el-col :span="20">
                <el-input v-model="sh" placeholder="请输入视频路径"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button icon="el-icon-search" circle @click="testVideo"></el-button>
                <el-button @click="close">切换</el-button>
            </el-col>
        </el-row>
      <video width="320" height="240" controls v-if="flag">
            <source :src="vh" type="video/mp4">
            <source :src="vh" type="video/AVI">
            <source :src="vh" type="video/mov">
            <source :src="vh" type="video/rmvb">
            <source :src="vh" type="video/rm">
            <source :src="vh" type="video/FLV">
            <source :src="vh" type="video/3GP">
            您的浏览器不支持 HTML5 video 标签。
        </video>
  </div>
</template>

<script>

export default {
    data() {
      return {
          sh:'',
          vh:"",
          flag:false
        //   playerOptions: {
        //   playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        //   autoplay: false, // 如果true,浏览器准备好时开始回放。
        //   muted: false, // 默认情况下将会消除任何音频。
        //   loop: false, // 导致视频一结束就重新开始。
        //   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        //   language: 'zh-CN',
        //   aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        //   fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        //   sources: [{
        //     type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
        //     src: 'https://vd2.bdstatic.com/mda-mctaz3hsuggeabcq/720p/h264_cae/1620603621361732181/mda-mctaz3hsuggeabcq.mp4?v_from_s=hkapp-haokan-tucheng&auth_key=1634545329-0-0-9eae44d6142f13b8ff0750cf5f43279d&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=' // url地址
        //   }],
        //   hls: true,
        //   poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', // 你的封面地址
        //   width: document.documentElement.clientWidth, // 播放器宽度
        //   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //   controlBar: {
        //     timeDivider: true,//时间分割线
        //     durationDisplay: true,//总时间
        //     remainingTimeDisplay: false,//剩余播放时间
        //     progressControl: true, // 进度条
        //     fullscreenToggle: true // 全屏按钮
        //   }
        // },
      }
    },
    methods:{
        testVideo(){
            this.vh = this.sh,
            this.flag = true
        },
        close(){
            this.sh = "";
            this.vh = "";
            this.flag = false;
        }
    }
}
</script>

<style scoped>
.v{
    width: 1200px;
    height: 500px;
    border: 1px solid red;
    position: relative;
    overflow: scroll;
}
</style>